<template>
  <div>
    <my-bread level1="权限管理" level2="角色列表"></my-bread>
    <el-button type="success" plain>添加角色</el-button>
    <!-- 表格 -->
    <el-table :data="roleList" style="width: 100%">
      <el-table-column type="expand" width="80">
        <template slot-scope="scope">
          <el-row v-for="(v1,i) in scope.row.children" :key="i">
            <!-- 第一列 -->
            <el-col :span="4">
              <el-tag closable @close="deleRights(scope.row,v1.id)">{{v1.authName}}</el-tag>
            </el-col>
            <el-col :span="20">
              <!-- 第二列里的行 -->
              <el-row v-for="(v2,i) in v1.children" :key="i">
                <el-col :span="4">
                  <el-tag
                    closable
                    type="success"
                    @close="deleRights(scope.row,v2.id)"
                  >{{v2.authName}}</el-tag>
                </el-col>
                <el-col :span="20">
                  <el-tag
                    closable
                    @close="deleRights(scope.row,v3.id)"
                    type="info"
                    v-for="(v3,i) in v2.children"
                    :key="i"
                  >{{v3.authName}}</el-tag>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column type="index" label="#编号" width="180"></el-table-column>
      <el-table-column prop="roleName" label="角色名称" width="180"></el-table-column>
      <el-table-column prop="roleDesc" label="角色描述"></el-table-column>

      <el-table-column prop="address" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini" plain circle title="编辑"></el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" plain circle title="删除"></el-button>
          <el-button
            type="success"
            icon="el-icon-check"
            size="mini"
            plain
            circle
            title="修改权限"
            @click="setUserRights(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 修改/设置用户权限 -->
    <!-- 展开所有选项 -->
    <!-- default-expand-all -->
    <el-dialog title="设置权限" :visible.sync="dialogFormVisibleRole">
      <el-tree
        ref="tree"
        default-expand-all
        :data="treeList"
        show-checkbox
        node-key="id"
        :default-expanded-keys="arrExpanded"
        :default-checked-keys="arrChecked"
        :props="defaultProps"
      ></el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleRole = false">取 消</el-button>
        <el-button type="primary" @click="alterRole()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  // 获取角色列表
  data () {
    return {
      roleList: [],
      // 设置权限弹框
      dialogFormVisibleRole: false,
      // 树形结构数据
      treeList: [],
      // 展开的id
      arrExpanded: [],
      arrChecked: [],
      defaultProps: {
        children: 'children',
        label: 'authName'
      },
      // 当前要修改的角色id
      currRoleId: -1

    }
  },
  mounted () {
    this.getAllroleList()
  },
  methods: {
    async getAllroleList () {
      const res = await this.$http.get('roles')
      this.roleList = res.data.data
    },
    // 删除用户权限
    async deleRights (role, rightsId) {
      // alert(1)
      console.log(role);
      const res = await this.$http.delete(`roles/${role.id}/rights/${rightsId}`)
      // console.log(res)
      role.children = res.data.data
    },
    // 修改/设置用户权限
    async setUserRights (role) {

      //获取所有权限
      const res = await this.$http.get('rights/tree')
      // console.log(res)
      this.treeList = res.data.data
      this.currRoleId = role.id
      // // 获取展开的id
      // var temp = []
      // var arr1 = res.data.data.forEach(element => {
      //   temp.push(element.id)
      //   element.children.forEach(element => {
      //     temp.push(element.id)
      //   });
      // })
      // console.log(temp)
      // this.arrExpanded = temp
      // console.log(role)
      // 根据id查角色
      // const res1 = await this.$http.get('roles/')
      // 获取所有的选中项
      var check = []
      role.children.forEach(element => {
        element.children.forEach(element => {
          element.children.forEach(element => {
            // console.log(element)
            check.push(element.id)
          });
        })
      })
      // console.log(check)
      this.arrChecked = check
      // this.getAllroleList()
      this.dialogFormVisibleRole = true
      // this.arrChecked = []
    },

    // 修改权限
    alterRole () {
      this.dialogFormVisibleRole = false
      // 获取所有被选中的项
      // 获取所有全选的 
      let arrAllcheck = this.$refs.tree.getCheckedKeys()
      // 获取所有半选的
      let halfAllcheck = this.$refs.tree.getHalfCheckedKeys()
      // // 全选+半选
      let checked = [...arrAllcheck, ...halfAllcheck]
      console.log(checked)
      // 发送请求
      this.$http.post(`roles/${this.currRoleId}/rights`, {
        rids: checked.join(',')
      }).then((res) => {
        console.log(res)
        const { meta: { msg, status } } = res.data
        if (status === 200) {
          this.$message.success(msg)
          //更新视图
          this.getAllroleList()
        } else {
          this.$message.error(msg)
        }
      })
    }
  }
}
</script>

<style>
</style>
